import React from "react";
import ReactEcharts from "echarts-for-react";
import ChartsWrap from "./chartsWrap";

const DashboardChart = ({ value = 0, title = "数据展示",name="" }) => {
  const getOption = value => {
    return {
      tooltip: {
        formatter: "{a} <br/>{b} : {c}%"
      },
      series: [
        {
          name: title,
          type: "gauge",
          detail: { formatter: "{value}%", fontSize: 26 },
          data: [{ value: parseInt(value), name: name }],
          axisLine: {
            lineStyle: {
              width: 15,
              color: [[0.3, '#00e676'], [0.8, '#40c4ff'], [0.9, '#ff7043'], [1, '#ff3d00']]
            }
          },
          splitLine: {
              length: 15,
              lineStyle: {
              }
          },
          pointer: {
              width: 5
          }
        }
      ]
    };
  };

  return (
    <ChartsWrap title={title}>
      <ReactEcharts theme="macarons" option={getOption(value)} />
    </ChartsWrap>
  );
};

export default DashboardChart;
